<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin="anonymous"
      integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ=="
      src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"
    ></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      //标题
      title: {
        borderWidth: 10,
        text: "ECharts 入门示例",
        textStyle: {
          color: "red",
        },
      },
      //提示
      tooltip: {
        trigger: "axis",
        triggerOn: "click",
        formatter: (v) => {
          return v[0].name + v[0].data;
        },
      },
      // 工具按钮
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          saveAsImage: {}, //导出图片
          dataView: {}, //数据视图
          restore: {}, //重置
          magicType: {
            //图标切换
            type: ["bar", "line"],
          },
        },
      },
      // 图例
      legend: {
        data: ["销量", "用户量"],
      },
      // x轴
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      // y轴
      yAxis: {
        type: "value",
      },
      //数据
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
          markPoint: {
            data: [
              {
                type: "min",
                name: "最小值",
              },
              {
                type: "max",
                name: "最大值",
              },
            ],
          },
          markLine: {
            data: [{ name: "平均值", type: "average" }],
          },
        },
        {
          name: "用户量",
          type: "bar",
          data: [15, 120, 136, 110, 110, 120],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</html>
